<template>
  <div id="main" style="height:500px;width: 100%;" ref="main">
  </div>
</template>
 
<script>
import * as echarts from "echarts";
import 'echarts-gl'
export default {
  name: 'HelloWorld',
  mounted() {
    this.drewLine()
  },
  methods: {
    drewLine(){
      let newData = [
        [[0.6674, 0.7634, 0.7147, 0.6312, 0.4996],
         [0.7093, 0.7919, 0.7499, 0.6780, 0.5460],
         [0.7326, 0.8077, 0.7696, 0.7040, 0.5738],
         [0.7491, 0.8190, 0.7836, 0.7223, 0.5948],
         [0.7619, 0.8278, 0.7946, 0.7365, 0.6119]],

        [[0.6850, 0.7776, 0.7308, 0.6496, 0.5304],
         [0.7279, 0.8082, 0.7671, 0.6970, 0.5646],
         [0.7500, 0.8239, 0.7859, 0.7214, 0.5788],
         [0.7652, 0.8347, 0.7989, 0.7380, 0.5890],
         [0.7767, 0.8430, 0.8089, 0.7506, 0.5980]],

        [[0.6996, 0.7894, 0.7442, 0.6651, 0.5615],
         [0.7411, 0.8205, 0.7795, 0.7104, 0.5904],
         [0.7610, 0.8353, 0.7965, 0.7318, 0.5944],
         [0.7741, 0.8452, 0.8080, 0.7459, 0.5934],
         [0.7840, 0.8526, 0.8166, 0.7566, 0.5919]],

        [[0.7128, 0.7998, 0.7562, 0.6792, 0.5888],
         [0.7518, 0.8303, 0.7895, 0.7213, 0.6174],
         [0.7689, 0.8440, 0.8044, 0.7393, 0.6181],
         [0.7798, 0.8528, 0.8140, 0.7507, 0.61227],
         [0.7878, 0.8593, 0.8212, 0.7590, 0.6050]],

        [[0.7249, 0.8091, 0.7674, 0.6923, 0.6121],
         [0.7611, 0.8387, 0.7983, 0.7309, 0.6415],
         [0.7756, 0.8511, 0.8109, 0.7458, 0.6420],
         [0.7842, 0.8588, 0.8187, 0.7544, 0.6354],
         [0.7903, 0.8644, 0.8243, 0.7605, 0.6263]]
      ]
      let newDataX = [2, 3, 4, 5 ,6] // 参数
      let newDataY = [2, 3 ,4 ,5 ,6] // Q
      let newVData = []
      for(let i = 0; i < newDataY.length; i++){ 
        newVData[i] = []
        for(let j = 0; j < newDataX.length; j++){ 
          newVData[i][j] = []
        }
      }
      for(let i = 0; i < newDataY.length; i++){
        let y = newDataY[i] - 2
        for(let k = 0; k < newData[0].length; k++){
          for(let j = 0; j < newDataX.length; j++){
            let x = newDataX[j] - 2
            let z = newData[i][j][k];
            newVData[i][k].push([x, y, z])
          }
        }
      }
      console.log('newVData', newVData);
      var chart = echarts.init(document.getElementById('main'));
      let series = []
      for(let i = 0; i < newDataY.length; i++){
        for(let j = 0; j < newDataX.length; j++){
          series.push({
            type: 'scatter3D',
            name: newDataY[i],
            data: newVData[i][j]
          },{
            type: 'line3D', //当type为line3D时有label没有作用，官网没有label这个配置项
            name: newDataX[i],
            lineStyle: {
              width: 3,
            },
            data: newVData[i][j]   //线数据和点数据所需要的格式一样
          })
        }
      }
      chart.setOption({
        xAxis3D: {
          type: 'category',
          name: '',
          data: newDataX,
        },
        yAxis3D: {
          type: 'category',
          name: '',
          data: newDataY,
        },
        zAxis3D: {
          type: 'value',
          name: '',
          min: 'dataMin', //默认取最大值显示
          max: 'dataMax', //默认取最小值显示
        },
        legend: {
          orient: 'vertical',
          right: 100,
          top: 200,
          icon: 'roundRect',
        },
        tooltip:{
          show:true
        },
        grid3D: {
          boxWidth: 400,
          boxHeight:250,
          boxDepth: 250,
          viewControl: {
            distance: 400
          }
        },
        series: series
      })
      window.addEventListener('resize', function () {
        chart.resize();
      });
    }
  }
}
</script>
 
<style scoped lang="scss">
</style>